<template>
    <div class="userList">
        <div class="header">
            <el-row>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="2">
                    <el-button type="success" size="mini" @click="addUser">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table
                :data="tableData"
                stripe
                height="69vh"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="用户"
                    width="180">
            </el-table-column>
            scheduleAuditingCode
            <el-table-column
                    prop="tel"
                    label="手机号码">
            </el-table-column>

            <el-table-column
                    prop="scheduleAuditingCode"
                    label="权限">
            </el-table-column>
            <el-table-column
                    prop="positionName"
                    label="职位">
            </el-table-column>
            <el-table-column
                    width="350"
                    label="操作">
                <template slot="header">
                    <el-input
                            @input="getSearch"
                            v-model="search"
                            size="mini"
                            prefix-icon="el-icon-search"
                            placeholder="请输入用户名"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" size="mini" @click="upd(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                    <el-button type="danger" size="mini" @click="contractDetail(scope.row)">详情</el-button>

                    <el-button type="success" size="mini" @click="addPactClick(scope.row)">新增合同协议</el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" >
            <el-form :model="addUserFrom" :rules="rules" ref="from">
                <el-form-item label="用户名:" prop="name">
                    <el-input v-model="addUserFrom.name" autocomplete="off" :disabled="addUserFrom.updeta"></el-input>
                </el-form-item>
                <el-form-item label="密码:" >
                    <el-input v-model="addUserFrom.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="tel">
                    <el-input v-model="addUserFrom.tel" autocomplete="off" type="tel" maxlenght="11"></el-input>
                </el-form-item>

                <el-form-item label="审核流程编码">
                    <el-select placeholder="请选择审核编码" v-model="addUserFrom.flowcoding">
                        <el-option :label="item.scheduleAuditingCode"
                                   :key="item.scheduleAuditingCode"
                                   :value="item.scheduleAuditingCode"
                                   v-for="item in getauditingScheduleData">

                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位名称">
                    <el-select placeholder="请选职位名称" v-model="addUserFrom.positionCode">
                        <el-option :label="item.name"
                                   :key="item.code"
                                   :value="item.code"
                                   v-for="item in jobtitleList">

                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>

        </el-dialog>

















        <el-dialog title="新增合同协议" :visible.sync="pact" >
            <el-form :model="addPact" :rules="rulesPact" ref="pact" label-width="100px">
                <el-form-item label="备注:" prop="memo">
                    <el-input v-model="addPact.memo" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="协议信息：" prop="img">
                    <el-upload
                            v-loading.fullscreen.lock="loading"
                            :element-loading-text="loadinginfo"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(0, 0, 0, 0.8)"
                            action="https://www.xmssj.com/dl/api/reimbursed/uploadFile"
                            :http-request="file"
                            ref="upload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="()=>{pact=false}">取 消</el-button>
                <el-button type="primary" @click="confirmPact">确 定</el-button>
            </div>
        </el-dialog>
        <el-pagination
                :page-size="10"
                :pager-count="11"
                @current-change="pageNum"
                layout="prev, pager, next"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
    import {listUser,auditingSchedule,addUser,delUser,updateUser} from "../../network/business";
    import {getJobTitle,upload} from "../../network/job";
    import {addUserAgreement,queryUserAgreement} from "../../network/business";

    export default {
        name: "index",
        data(){
            return {


                loading:false,
                loadinginfo:"",
                fileList:[],
                dialogImageUrl: '',
                rulesPact:{
                    memo:[
                        { required: true, message: '请输入备注', trigger: 'blur' },
                    ]
                },

                imageUrl:"",
                dialogVisible: false,
                pact:false,
                dialogFormVisible:false,
                disabled:false,
                title:"新增用户",
                search:"",
                rules: {
                    name:[
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    pass:[
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    tel:[
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                    ],
                    flowcoding:[
                        { required: true, message: '请选择流程编码', trigger: 'blur' },
                    ],
                    img:[
                        { required: true, message: '请选择流程编码', trigger: 'blur' },
                    ]
                },
                totalSize:1,
                getauditingScheduleData:[],
                defaultFrom:{
                    name:"",
                    pass:"",
                    tel:"",

                    flowcoding:"",
                    updeta:false,
                    id:"",positionCode:''
                },
                addPact:{
                  memo:'',
                  urls:[],
                    userId:""
                },
                addUserFrom:{
                    name:"",
                    pass:"",
                    tel:"",
                    flowcoding:"",
                    updeta:false,
                    id:"",positionCode:''
                },

                jobtitleList:[],
                dataPage: {
                    pageNum: 1,
                    pageSize:10
                },
                tableData: []
            }
        },
        created() {
            this.getlistUser()
            this.getJobTitleList()
            this.getauditingSchedule()
        },
        watch:{
            dialogFormVisible:function (v) {
                if(!v){
                    this.addUserFrom=Object.assign({},this.defaultFrom)
                }

            }
        },

        methods:{

            contractDetail(e){
                let {userId}=e
              this.$router.push({path:"/details",query:{userId}})
            },
            cancelPact(){
                this.dialogVisible=false
            },
            confirmPact(){
               if( this.addPact.memo==''){
                   this.$message.error('备注为必填项')
                   return
               }
                if( this.addPact.urls.length==0){
                    this.$message.error('图片为必填项')
                    return
                }
                addUserAgreement(this.addPact).then(v=>{
                    if(v.code==200){
                        this.$message.success('添加成功')
                        this.pact=false
                    }else {
                        this.$message.error(v.msg)
                    }
                })
            },
            file(e){
                this.loading=true
                this.loadinginfo='正在上传图片,请稍等....'
              let file =new FormData()
                file.append('img',e.file)
                upload(file).then(v=>{
                    if(v.code==200){
                        this.loadinginfo='上传完成....'
                        this.addPact.urls.push(v.data)


                    }else{
                        this.$message.error('上传图片失败')
                    }
                    setTimeout(()=>{
                        this.loading=false
                    },200)
                })

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;

            },
            addPactClick(row){

                    this.addPact.memo=''
                    this.addPact.urls=[]
                    this.dialogImageUrl =''

                    let {userId} =row
                    this.addPact.userId=userId

                    this.pact=true
                        //清空图片
                    this.$nextTick(()=>{
                      this.$refs.upload.clearFiles()
                    })
                    let data ={
                            userId
                    }

                    queryUserAgreement(data).then(v=>{
                        if(v.code==200){
                            console.log(2000)
                        }else {
                            this.$message.error(v.msg)
                        }
                    })
                },
            getJobTitleList(){
                let data =''
             getJobTitle(data).then(v=>{
                    if(v.code==200){
                        this.jobtitleList=v.data.content
                    }else{
                        this.$message.error(v.msg)
                    }
                })
            },
            pageNum(e){
              this.dataPage.pageNum=e
                this.getlistUser()
            },
            getSearch(){
                this.dataPage.pageNum=1
                this.dataPage.searchVal=this.search
                this.getlistUser()
            },

            async getlistUser(){
                let result =await listUser(this.dataPage)
                if(result.code==200){
                    this.totalSize=result.data.totalSize

                    this.tableData=result.data.content
                }else{
                    this.$error(result.msg)
                }
            },
            async getauditingSchedule(){
                let result =await auditingSchedule()
                if(result.code==200){
                    this.getauditingScheduleData=result.data.content

                }else{
                    this.$error(result.msg)
                }
            },

            upd(row){

                this.addUserFrom.id=row.id
                this.addUserFrom.name=row.name
                this.addUserFrom.pass=row.pwd
                this.addUserFrom.flowcoding=row.scheduleAuditingCode
                this.addUserFrom.tel=row.tel
                this.addUserFrom.positionCode=row.positionCode
                this.addUserFrom.updeta=true
                this.dialogFormVisible=true
                this.title='修改用户'

            },
            del(row){

                let data ={
                    userId:row.userId

                }
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then( async () => {

                    let status = await delUser(data)
                    if(status.code==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getlistUser()
                    }else{
                        this.$message({
                            type: 'success',
                            message: '删除失败!'
                        });
                    }

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            addUser(){
                this.dialogFormVisible=true
            },
            cancel(){
                this.dialogFormVisible=false
                //清空表单
                this.addUserFrom=Object.assign({},this.defaultFrom)

            },
            confirm(row){
                console.log(row);
                this.$refs.from.validate(async v=>{
                    if(!v) {
                        return
                    }
                    let params={
                        name:this.addUserFrom.name,
                        pwd:this.addUserFrom.pass,
                        scheduleAuditingCode:this.addUserFrom.flowcoding,
                        tel:this.addUserFrom.tel,
                        id:this.addUserFrom.id,
                        positionCode:this.addUserFrom.positionCode
                    }
                    if(this.addUserFrom.updeta){
                        let status = await  updateUser(params)
                        if(status.code==200){
                            this.$success('修改用户修成功')
                                this.dialogFormVisible=false
                            this.addUserFrom=Object.assign({},this.defaultFrom)

                        }else{
                            this.$error(status.msg)
                        }
                    }
                    else{
                        let status = await  addUser(params)
                        if(status.code==200){
                            this.$success('添加用户成功')
                            this.dialogFormVisible=false
                            this.addUserFrom=Object.assign({},this.defaultFrom)

                        }else{
                            this.$error(status.msg)
                        }

                    }
                    this.getlistUser()

                })
            }
        }
    }
</script>

<style scoped lang="sass">
.header
    margin-bottom: 20px
::v-deep .el-dialog
    width: 30%
    border-radius: 5px

</style>